<template>
	<view class="u-m-b-80" v-if="detail">
		<u-navbar :back-icon-color="back_color" :isBack="false" :background="background" :title-color="title_color"
			:border-bottom="false" :immersive="true">
			<view class="m-navbar-back" @click="to_back()">
				<u-icon name="arrow-left"></u-icon>
			</view>
		</u-navbar>
		<view class="m-head" @click="to_link('/pages/list/img_list?id='+marchantId)" style="overflow: hidden;">
			<image :src="bannerAlbum" mode="aspectFill"></image>
			<view class="m-head-b">
				<u-icon name="photo"></u-icon>
				<text class="u-m-l-10">查看({{totalAlbum}})</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="m-head-empty"></view>
		</view>
		<view class="m-title">
			<text>{{detail.title || ''}}</text>
		</view>
		<view class="m-box">
			<view class="m-box-left">
				<view class="m-box-left__top">
					<view class="m-box-tip">
						<text>{{detail.star || 0}}分</text>
					</view>
					<view class="u-flex" @click="to_link('/pages/comment/comment?marchant_id='+marchantId)">
						<text>{{commentCount}}条评论</text>
						<image src="@/static/index/icon-right.png" mode=""></image>
					</view>
				</view>
				<view class="m-box-left__bottom u-line-1" v-if="commentList.length > 0">
					<text>“ {{commentList[0].content}} ”</text>
				</view>
			</view>
			<view class="m-box-right" @click="callPhone">
				<image src="@/static/index/ico_phone.png" mode=""></image>
				<text>电话</text>
			</view>
		</view>
		<view class="u-flex u-col-top  u-m-t-25 u-m-l-25 u-m-r-25">
			<view class="m-add u-line-2">
				<text>{{detail.address || ''}}</text>
			</view>
		</view>
		<view class="u-flex u-row-between u-m-t-10 u-m-l-25 u-m-r-25 u-p-b-40">
			<view class="u-flex">
				<image src="@/static/index/ico_dizhi.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
				<text class="m-font2 u-m-l-10">距您{{detail.distance || 0}}</text>
			</view>

			<view class="m-map" @click="clickMap">
				<text class="u-m-r-6">地图/导航</text>
				<image src="@/static/index/icon-right.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="m-vip">
			<view class="m-vip-more">
				<text>更多权益</text>
				<image src="@/static/index/icon-right.png" mode=""></image>
			</view>
			<view class="m-vip-title">
				<image src="@/static/index/baiyin.png" mode=""></image>
				<text>白银会员专享</text>
			</view>
			<view class="u-flex u-p-t-15 u-p-l-25">
				<view class="m-vip-item">
					<image src="@/static/index/icon1.png" mode=""></image>
					<text>9.8折房费</text>
				</view>
				<view class="m-vip-item">
					<image src="@/static/index/icon1.png" mode=""></image>
					<text>可推迟1-2小时入住</text>
				</view>
			</view>
		</view> -->
		<u-gap height="25" bg-color="#f4f4f4"></u-gap>
		<view class="u-flex u-row-between  u-m-t-30 u-m-l-25 u-m-r-25 u-m-b-15"
			@click="to_link('/pages/selectDate/selectDate?order_sup='+order_sup)">
			<view class="m-date">
				<text>{{getDateFormat(vuexStartDateObj.dateStr)}}</text>
				<text
					class="m-font3 u-m-l-6">{{vuexStartDateObj.recent == '' ? vuexStartDateObj.week : vuexStartDateObj.recent}}</text>
				<text class="m-font2 u-m-l-10 u-m-r-10" v-if="order_sup != 3">-</text>
				<text v-if="order_sup != 3">{{getDateFormat(vuexEndDateObj.dateStr)}}</text>
				<text v-if="order_sup != 3"
					class="m-font3 u-m-l-6">{{vuexEndDateObj.recent == '' ? vuexEndDateObj.week : vuexEndDateObj.recent}}</text>
			</view>
			<view class="m-map" >
				<text class="u-m-r-6" v-if="order_sup != 3">共{{vuexDayCount}}晚</text>
				<u-icon name="arrow-right" color="#ccc"></u-icon>
			</view>
		</view>
		<view class="m-list" v-if="list.length > 0 && order_sup != 3">
			<template>
				<view v-for="(item,index) in list" :key="index">
					<!-- 单条规则 -->
					<view class="m-item u-p-b-25">
						<view class="m-item-img" @click.stop="showPanel(item)">
							<image :src="item.originalPic" mode="aspectFill"></image>
							<view class="m-item-tip" v-if="item.is_offer == 1">
								<text>特价</text>
							</view>
							<view class="m-item-tip" v-if="item.is_offer == 2">
								<text>秒杀</text>
							</view>
							<view class="m-item-tip" style="width: 110rpx;" v-if="item.is_offer == 3">
								<text>今夜特价</text>
							</view>
							<view class="m-item-tag">
								<text>详情</text>
							</view>
						</view>
						<view class="m-item-con" @click.stop="showPanel(item)">
							<view class="u-line-1 m-font4">
								<text>{{item.title}}</text>
							</view>
							<view class="m-font5 u-m-t-6">
								<text>{{item.subtitle}}</text>
							</view>
							<view class="m-tag u-m-t-20">
								<text class="u-m-r-10" v-for="(val,key) in item.tags" :key="key">{{val}}</text>
							</view>
						</view>

						<view class="u-flex u-flex-col u-col-top u-col-bottom u-flex-1">
							<view class="m-item-price">
								<text>{{item.price}}</text>
							</view>
							<view class="m-item-lineprice" v-if="Number(item.origin_price) != Number(item.price)">
								<text>￥{{item.origin_price}}</text>
							</view>
							<view class="m-item-jifen" v-if="item.jifen > 0 && vuexDayCount==1 && if_jifen == 1">
								<text>{{item.jifen}}积分</text>
							</view>
						</view>
						<!-- 单个规则的 -->
						<view class="m-item-right">
							<!-- 不限购 -->
							<view class="m-item-btn" @click="toConfirmOrder(item)">
								<view class="m-item-btn-t">
									<text>预订</text>
								</view>
								<view class="m-item-btn-b">
									<text>预付</text>
								</view>
							</view>
							<!-- 限量 -->
							<!-- <template>
								<view class="m-item-btn" @click.stop="toConfirmOrder(item)">
									<view class="m-item-btn-t">
										<text>预订</text>
									</view>
									<view class="m-item-btn-b">
										<text>在线付</text>
									</view>
								</view>
								<view class="u-flex u-row-center m-item_font1 u-m-t-10">
									<text class="">仅剩1间</text>
								</view>
							</template> -->
							<!-- 无房间 -->
							<!-- <view class="m-item-btn m-item-btn-extend2" v-else>
							<view class="m-item-btn-t">
								<text>满</text>
							</view>
							<view class="m-item-btn-b">
								<text>在线付</text>
							</view>
						</view> -->
							<!-- <view class="m-item-right__bottom" @click.stop="showChildList(index)">
								<block v-if="childListIndex == index">
									<text>收起</text>
									<image src="@/static/index/icon-right.png" style="transform: rotate(-90deg);"
										mode=""></image>
								</block>
								<block v-else>
									<text>更多价格</text>
									<image src="@/static/index/icon-right.png" mode=""></image>
								</block>
							</view> -->
						</view>


					</view>
					<!-- 多条规则的列表 -->
					<template>

						<view class="m-item m-item-extend u-border-bottom" v-for="(v,k) in 2" :key="k"
							v-if="childListIndex==index" @click.stop="showPanel(item.time_type,index,k)">
							<view class="m-item-con m-item-con-extend" style="justify-content: center;">
								<view class="m-font4 u-flex">
									<text>今晚特价</text>
									<image src="@/static/index/icon-right.png" style="width: 30rpx;height: 30rpx;"
										mode=""></image>
								</view>
								<view class="m-tag u-m-t-15">
									<text class="u-m-r-10">无窗</text>
									<text class="u-m-r-10">无早餐</text>
								</view>
							</view>

							<view class="u-flex u-flex-col u-col-top u-col-bottom u-flex-1">
								<view class="m-item-price">
									<text>480</text>
								</view>
								<view class="m-item-lineprice">
									<text>￥500</text>
								</view>
							</view>
							<view class="m-item-right">
								<view class="m-item-btn" @click.stop="toConfirmOrder(v)">
									<view class="m-item-btn-t">
										<text>预订</text>
									</view>
									<view class="m-item-btn-b">
										<text>在线付</text>
									</view>
								</view>
								<view class="u-flex u-row-center m-item_font1 u-m-t-10">
									<text class="">仅剩1间</text>
								</view>
								<!-- 限量 -->
								<template v-if="v.is_quantity_limit===1">
									<view>
										<view class="u-flex u-row-center m-item_font1">
											<text class="">仅剩{{v.quantity_limit_count}}间</text>
										</view>
										<view class="m-item-btn m-item-btn-extend" @click.stop="toConfirmOrder(v)">
											<view class="m-item-btn-t">
												<text>抢</text>
											</view>
											<view class="m-item-btn-b">
												<text>在线付</text>
											</view>
										</view>
									</view>
								</template>
								<!-- 无房间 -->
								<!-- 	<view class="m-item-btn m-item-btn-extend2" v-else>
									<view class="m-item-btn-t">
										<text>满</text>
									</view>
									<view class="m-item-btn-b">
										<text>在线付</text>
									</view>
								</view> -->
							</view>
						</view>
					</template>
				</view>
			</template>
		</view>

		<!-- 钟点房 -->
		<!-- <view class="m-h3" style="margin-bottom: 0rpx;" v-if="timeList.length > 0">
			<view class="m-h3-left">
				<text>钟点房</text>
			</view>
		</view> -->
		<view class="m-list" v-if="timeList.length > 0">
			<view class="m-item u-p-b-25" v-for="(item,index) in timeList" :key="index">
				<view class="m-item-img" @click.stop="showPanel(item)">
					<image :src="item.originalPic" mode="aspectFill"></image>
					<view class="m-item-tip" v-if="item.is_offer == 1">
						<text>特价</text>
					</view>
					<view class="m-item-tip" v-if="item.is_offer == 2">
						<text>秒杀</text>
					</view>
					<view class="m-item-tag">
						<text>详情</text>
					</view>
				</view>
				<view class="m-item-con" @click.stop="showPanel(item)">
					<view class="u-line-2 m-font4">
						<text>{{item.title}}</text>
						<text class="u-m-l-10">连住{{item.hour}}小时</text>
					</view>
					<!-- <view class="m-font5 u-m-t-6">
						<text>连住{{item.hour}}小时</text>
					</view> -->
					<view class="m-font5 u-m-t-6">
						<text>{{item.subtitle}}</text>
					</view>
					<view class="m-tag u-m-t-20">
						<text class="u-m-r-10" v-for="(val,key) in item.tags" :key="key">{{val}}</text>
					</view>
				</view>
			
				<view class="u-flex u-flex-col u-col-top u-col-bottom u-flex-1">
					<view class="m-item-price">
						<text>{{item.price}}</text>
					</view>
					<!-- <view class="m-item-lineprice" v-if="Number(item.origin_price) != Number(item.price)">
						<text>￥{{item.origin_price}}</text>
					</view> -->
				</view>
				<!-- 单个规则的 -->
				<view class="m-item-right">
					<!-- 不限购 -->
					<view class="m-item-btn" @click="toConfirmOrder(item)">
						<view class="m-item-btn-t">
							<text>预订</text>
						</view>
						<view class="m-item-btn-b">
							<text>预付</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="25" bg-color="#f4f4f4"></u-gap>
		<view class="m-h3">
			<view class="m-h3-left">
				<text>住客点评</text>
			</view>
		</view>
		<!-- <view class="u-flex u-m-l-25 u-m-r-25">
			<view class="m-score-font1">
				<text>{{detail.score || 0}}</text>
			</view>
			<text class="m-score-font2 u-m-l-10">{{getScoreTextComputed}}</text>
		</view> -->
		<view class="u-flex-col u-m-l-25 u-m-r-25 u-m-t-25">
			<view class="m-score-item u-p-b-25" v-for="(item,index) in commentList" :key="index">
				<view class="u-flex">
					<view class="m-score-item-img">
						<image v-if="item.user.image" :src="item.user.image" mode=""></image>
						<image v-else src="@/static/center/center-logo.png" mode=""></image>
					</view>
					<view class="u-flex-1">
						<view class="m-score-item-font1">{{item.user.nickname}}</view>
						<view class="m-score-font2">
							<text>{{item.dtTime}}</text>
						</view>
					</view>
					<view class="m-score-item-star">
						<text>{{item.pingjia_star}}分</text>
					</view>
				</view>
				<view class="m-score-item-con">
					<view class="m-font1 u-m-t-20">
						<text>{{item.content}}</text>
					</view>
					<view class="u-flex u-flex-wrap">
						<view class="m-pingjia-img" v-for="(val,key) in item.image"
							@click="$m.previewImage(item.image,key)">
							<image :src="val" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-center u-p-b-30">
				<view class="m-comment-more" @click="to_link('/pages/comment/comment?marchant_id='+marchantId)">
					<text>全部{{commentCount}}条评论</text>
				</view>
			</view>
		</view>
		<u-gap height="25" bg-color="#f4f4f4"></u-gap>
		<view class="m-h3">
			<view class="m-h3-left">
				<text>服务设施</text>
			</view>
		</view>
		<view class="m-cell">
			<view class="m-cell-item" v-for="(item,index) in detail.shebei" :key="index">
				<image src="@/static/index/icon-dui.png" mode=""></image>
				<text>{{item}}</text>
			</view>
		</view>
		<u-gap height="25" bg-color="#f4f4f4"></u-gap>
		<view class="m-h3">
			<view class="m-h3-left">
				<text>政策</text>
			</view>
		</view>

		<view class="m-content">
			<u-parse :html="detail.content || ''"></u-parse>
		</view>
		<!-- <view class="m-subtitle">
			<text>① 入住时间</text>
		</view>
		<view class="m-content">
			<text>入住时间 14:00后
				退房时间 14:00前</text>
		</view>
		<view class="m-subtitle">
			<text>②  儿童及加床</text>
		</view>
		<view class="m-content">
			<text>欢迎携带儿童入住
所有房型不可加床、不提供婴儿床</text>
		</view> -->


		<u-gap height="25" bg-color="#f4f4f4"></u-gap>
		<view class="m-h3" v-if="hotelList.length > 0">
			<view class="m-h3-left">
				<text>更多酒店</text>
			</view>
		</view>
		<view class="scroll" v-if="hotelList.length > 0">
			<scroll-view :scroll-x="true" >
				<view class="m-hotel-list">
					<view class="m-hotel-view" v-for="(item,index) in hotelList" :key="index" @click="toDetail(item.id)">
						<view class="m-hotel-item">
							<view class="m-hotel-item__image">
								<image :src="item.img" mode="aspectFill"></image>
							</view>
							<view class="m-hotel-content">
								<view class="m-hotel-title u-line-1">
									{{item.title}}
								</view>
								<view class="u-flex u-m-t-10">
									<text class="m-hotel-score">{{item.star}}分</text>
									<text class="m-hotel-comment">{{item.comment_num}}条评论</text>
								</view>
								<view class="m-hotel-price">
									<text>{{item.lowest_prices}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<m-login></m-login>
	</view>
</template>

<script>
	import {
		getRecent,
		getWeek,
		calcDay
	} from "@/common/function/date.js"
	import {
		getScoreText,
		get_date
	} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				back_color: "#fff",
				background: {
					background: 'none'
				},
				title_color: "rgba(0,0,0,0)",
				show: false, //房型展示
				list: [],
				timeList:[],
				detail: {},
				bannerAlbum: '',
				totalAlbum: 0,
				order_sup:2,

				startTime: '',
				endTime: '',
				marchantId: '',
				detail: {
					imInfo: ''
				},
				commentList: [],
				commentCount: 0,

				panelInfo: null,
				childListIndex: null,
				
				hotelList:[],
				if_jifen:0,//是否可以使用积分

			};
		},
		computed: {
			getScoreTextComputed() {
				return getScoreText(this.detail.score || 0)
			},
			getDateFormat() {
				return (str) => {
					return str ? get_date('MM月DD日', str + ' 00:00:00') : ''
				}
			},
			getDateComputed() {
				return (time) => {
					return get_date('YYYY-MM-DD', time * 1000);
				}
			},
			getAddressComputed() {
				return (address) => {
					return address.slice(2)
				}
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			this.if_jifen = options.if_jifen || 0
			this.marchantId = options.id
			this.order_sup = options.order_sup || 2
			this.initDate(options);
			this.getHotelAlbum();
			this.getDetailFunction()
			this.getCommnetFun()
			
			this.getMoreHotelFun()
			if(this.order_sup == 3){
				this.getTimeHotelFun()
			}
			
			uni.$on('resetListFun', () => {
				this.getDetailFunction()
			})
			uni.$on('loginSuccess',()=>{
				this.getDetailFunction()
			})
		},
		methods: {
			get_date,
			getTimeHotelFun(){
				let {
					lng,
					lat
				} = this.vuexLocation;
				let params = {
					startTime: this.vuexStartDateObj.dateStr,
					endTime: this.vuexEndDateObj.dateStr,
					id: this.marchantId,
					longitude: lng,
					latitude: lat,
				}
				this.$http.getJson('hotal_roomListHour', params).then(res => {
					if (res.code == 1) {
						this.detail = res.data.info
						let list = res.data.list
						list.forEach(item=>{
							item.price = Number(item.price)
						})
						this.timeList = list
					} else {
						this.$m.msg(res.message, () => {
							this.to_back()
						})
					}
				})
			},
			getMoreHotelFun() {
				this.$http.getJson('hotal_searchList', {
					arrive_time: this.vuexStartDateObj.dateStr,
					departure_time: this.vuexEndDateObj.dateStr,
					order_sup:this.order_sup,
					page:1,
					pagenum:10,
					id:this.marchantId
				}).then(res=>{
					if(res.code == 1){
						let list = res.data.list || []
						list = list.filter(item=>{
							return item.id != this.marchantId
						})
						this.hotelList = list
					}
				})
			},
			//跳转到详情页
			toDetail(id) {
				wx.redirectTo({
					url: '/pages/list/detail?id=' + id + '&startDate=' + this.vuexStartDateObj.dateStr +
						'&endDate=' + this.vuexEndDateObj.dateStr+'&order_sup='+this.order_sup,
				})
			},
			
			callPhone() {
				if (this.detail.phone) {
					uni.makePhoneCall({
						phoneNumber: this.detail.phone
					})
				}
			},
			getDetailFunction() {
				let {
					lng,
					lat
				} = this.vuexLocation;
				let params = {
					startTime: this.vuexStartDateObj.dateStr,
					endTime: this.vuexEndDateObj.dateStr,
					id: this.marchantId,
					longitude: lng,
					latitude: lat,
				}
				this.$http.getJson('hotal_roomList', params).then(res => {
					if (res.code == 1) {
						this.detail = res.data.info
						let list = res.data.list
						list.forEach(item=>{
							item.price = Number(item.price)
						})
						this.list = list
						uni.setStorageSync('hotelInfo', this.detail)
					} else {
						this.$m.msg(res.message, () => {
							this.to_back()
						})
					}
				})
			},
			getCommnetFun() {
				this.$http.getJson('hotal_commentList', {
					type: 0,
					hotal_id: this.marchantId,
					page: 1,
					pagenum: 1
				}).then(res => {
					if (res.code == 1) {
						this.commentList = res.data || []
						this.commentCount = res.count
					}
				})
			},
			//兼容分享后的页面
			initDate(options) {
				if (!this.vuexStartDateObj.dateStr || !this.vuexEndDateObj.dateStr) {
					this.$u.vuex('vuexStartDateObj', {
						dateStr: options.startDate,
						week: getWeek(options.startDate),
						recent: getRecent(options.startDate)
					})
					this.$u.vuex('vuexEndDateObj', {
						dateStr: options.endDate,
						week: getWeek(options.endDate),
						recent: getRecent(options.endDate)
					})
					this.$u.vuex('vuexDayCount', calcDay(options.startDate, options.endDate))
				}


			},
			showChildList(index) {
				this.childListIndex = this.childListIndex === null ? index : null;
			},
			clickMap() {
				uni.openLocation({
					latitude: this.detail.latitude * 1,
					longitude: this.detail.longitude * 1,
					name: this.detail.title,
					address: this.detail.address,
					success: function() {
						console.log('success');
					}
				});
			},
			getHotelAlbum(id) {
				this.$http.getJson('hotal_album', {
					id: this.marchantId
				}).then(res => {
					if (res.code == 1) {
						this.totalAlbum = res.data.total
						let list = res.data.list || []
						if (list.length > 0) {
							this.bannerAlbum = list[0].originalPic[0]
						}

					}
				})
			},
			showPanel(item) {
				this.to_link('/pages2/hotel-type-detail/hotel-type-detail?id=' + item.id)
			},
			toConfirmOrder(info) {
				uni.setStorageSync('order_info', info)
				uni.setStorageSync('hotelInfo', this.detail)
				//,item.,item.
				let url = '/pages/order/addOrder' + '?start_time=' + this.vuexStartDateObj.dateStr +
					'&end_time=' + this.vuexEndDateObj.dateStr +
					'&marchant_id=' + this.marchantId +'&order_sup='+this.order_sup+'&if_jifen='+this.if_jifen
				this.to_link(url)
			}
		}
	}
</script>

<style lang="scss">
	.m-navbar-back {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		margin-left: 20rpx;
	}

	.m-head {
		position: relative;
		width: 750rpx;
		height: 400rpx;

		image {
			width: 750rpx;
		}

		.m-head-b {
			position: absolute;
			bottom: 55rpx;
			left: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 174rpx;
			height: 56rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			color: #fff;
			font-size: 24rpx;
		}

		.m-head-empty {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			background: #fff;
		}
	}

	.m-font1 {
		font-size: 26rpx;
		color: #333;
		line-height: 36rpx;
	}

	.m-font2 {
		font-size: 24rpx;
		color: #33302D;
	}

	.m-font3 {
		font-size: 24rpx;
		color: #333;
		font-weight: 400;
	}

	.m-font4 {
		font-size: 30rpx;
		color: #333;
		font-weight: 800;
	}

	.m-font5 {
		font-size: 24rpx;
		color: #76706B;
	}

	.m-font6 {
		font-size: 24rpx;
		color: #333;
	}

	.m-font7 {
		font-size: 24rpx;
		color: #999;
	}

	.m-tag {
		display: flex;
		flex-wrap: wrap;

		text {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 5rpx;
			height: 32rpx;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 2rpx solid #D3CEC9;
			padding: 0 10rpx;
			font-size: 18rpx;
			color: #8F6F4C;
		}
	}

	.m-price {
		font-size: 30rpx;
		font-weight: 800;
		color: #fa3534;

		&::before {
			content: '￥';
			font-size: 24rpx;
			color: #FA3534;
		}
	}

	.m-price2 {
		font-size: 26rpx;
		color: #999;
		text-decoration: line-through;
	}

	.m-title {
		margin: 0rpx 25rpx 0 25rpx;
		font-size: 34rpx;
		line-height: 48rpx;
		font-weight: 800;
		color: #33302D;
	}

	.m-box {
		display: flex;
		justify-content: space-between;
		padding: 32rpx 25rpx 0;

		.m-box-left {
			width: 525rpx;
			height: 136rpx;
			background: #F6F6F6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.m-box-left__top {
				display: flex;
				padding: 24rpx 0 0 20rpx;
				font-size: 24rpx;
				color: #33302D;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				.m-box-tip {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 76rpx;
					height: 46rpx;
					background: #D3A358;
					border-radius: 12rpx 12rpx 0rpx 12rpx;
					font-size: 36rpx;
					color: #fff;
					margin-right: 12rpx;
				}
			}

			.m-box-left__bottom {
				font-size: 24rpx;
				color: #33302D;
				margin-top: 10rpx;
			}
		}

		.m-box-right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 160rpx;
			height: 136rpx;
			background: #FBF6EE;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 24rpx;
			color: #8F6F4C;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.m-add {
		font-size: 28rpx;
		color: #33302D;
		font-weight: 800;
		line-height: 40rpx;
	}

	.m-date {
		font-size: 32rpx;
		color: #33302D;
		font-weight: 800;
		line-height: 50rpx;
	}

	.m-map {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #8F6F4C;
		text-align: right;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.m-vip {
		position: relative;
		width: 750rpx;
		height: 134rpx;
		background: linear-gradient(180deg, #FFF3E6 0%, #FFFFFF 45%, #FFFFFF 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.m-vip-more {
			position: absolute;
			top: 16rpx;
			right: 24rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #76706B;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.m-vip-title {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #33302D;
			font-weight: 800;
			padding-top: 24rpx;
			padding-left: 25rpx;

			image {
				width: 64rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.m-vip-item {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #76706B;
			margin-right: 20rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	.m-serve-item {
		display: flex;
		align-items: center;
		padding: 10rpx;
		font-size: 26rpx;
		color: #999;

		image {
			width: 28rpx;
			height: 28rpx;
		}
	}


	.m-list {
		display: flex;
		flex-direction: column;

		.m-item {
			display: flex;
			padding: 25rpx 25rpx 0 25rpx;

			.m-item-img {
				display: flex;
				flex-direction: column;
				position: relative;
				width: 160rpx;
				height: 160rpx;
				flex-shrink: 0;

				image {
					width: 100%;
					border-radius: 10rpx;
				}

				.m-item-tag {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: 0;
					right: 0;
					background: rgba(#000, 0.2);
					color: #fff;
					font-size: 22rpx;
					width: 60rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-top-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}

				.m-item-tip {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					left: 0;
					background: #DE2C38;
					color: #fff;
					font-size: 22rpx;
					width: 60rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-top-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
			}

			.m-item-con {
				display: flex;
				flex-direction: column;
				width: 260rpx;
				margin-left: 20rpx;
			}

			.m-item-con-extend {
				width: 540rpx;
				margin-left: 0;
			}

			.m-item-price {
				font-size: 40rpx;
				color: #DE2C38;

				&::before {
					content: '￥';
					font-size: 24rpx;
				}
			}

			.m-item-lineprice {
				font-size: 20rpx;
				color: #8F6F4C;
				text-decoration: line-through;
			}
			
			.m-item-jifen{
				font-size: 20rpx;
				color: #DE2C38;
			}

			.m-item-right {
				display: flex;
				flex-direction: column;
				padding-left: 15rpx;
				align-items: flex-end;
				position: relative;

				// justify-content: center;
				.m-item-right__bottom {
					position: absolute;
					bottom: -10rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 22rpx;
					color: #ADA9A5;
					width: 150rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						transform: rotate(90deg);
					}
				}

				.m-item_right_icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					border: 1px solid #fa3534;
					font-size: 30rpx;
					color: #fa3534;
					text-align: center;
					transition: all 0.3s;
				}

				.m-item_right_icon_active {
					transform: rotate(90deg);
				}

				.m-item-btn {
					display: flex;
					flex-direction: column;
					width: 100rpx;
					height: 80rpx;
					border: 1rpx solid #D3A358;
					border-radius: 0rpx;

					.m-item-btn-t {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 60%;
						background: #D3A358;
						font-size: 28rpx;
						color: #fff;
					}

					.m-item-btn-b {
						display: flex;
						flex: 1;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						color: #D3A358;
					}
				}

				.m-item-btn-extend {
					border: 1rpx solid #ff9900;

					.m-item-btn-t {
						background: #ff9900;
					}

					.m-item-btn-b {
						color: #ff9900;
					}
				}

				.m-item-btn-extend2 {
					border: 1rpx solid #ccc;

					.m-item-btn-t {
						background: #ccc;
					}

					.m-item-btn-b {
						color: #999;
					}
				}
			}
		}

		.m-item-extend {
			background: #f5f5f5;
			padding: 20rpx 25rpx 20rpx 25rpx;
		}
	}


	.m-h3 {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 25rpx;

		.m-h3-left {
			font-size: 32rpx;
			color: #222;
			font-weight: 800;
		}

		.m-h3-right {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #999;
		}
	}

	.m-cell {
		display: flex;
		flex-wrap: wrap;
		padding: 0 25rpx;

		.m-cell-item {
			display: flex;
			align-items: center;
			width: 50%;
			font-size: 24rpx;
			color: #33302D;
			margin-bottom: 24rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	.m-subtitle {
		font-size: 26rpx;
		color: #222222;
		font-weight: 600;
		padding: 0 25rpx 20rpx;
	}

	.m-content {
		font-size: 24rpx;
		color: #222222;
		line-height: 40rpx;
		padding: 0 30rpx 30rpx;
	}

	.scroll {
		width: 750rpx;
		padding-bottom: 100rpx;

		scroll-view {
			width: 100%;
			height: 300rpx;
		}

		.m-hotel-list {
			display: flex;
			padding-left: 25rpx;

			.m-hotel-view {
				padding-right: 24rpx;

				.m-hotel-item {
					display: flex;
					padding: 20rpx;
					width: 620rpx;
					height: 280rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 20rpx 1rpx rgba(0, 0, 0, 0.08);
					border-radius: 12rpx 12rpx 12rpx 12rpx;

					.m-hotel-item__image {
						width: 180rpx;
						height: 240rpx;
						border-radius: 10rpx;
						background: #f6f6f6;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.m-hotel-content {
						position: relative;
						width: 370rpx;
						margin-left: 20rpx;
					}

					.m-hotel-price {
						position: absolute;
						bottom: 0;
						right: 0;
						font-size: 40rpx;
						color: #DE2C38;

						&::before {
							content: '￥';
							font-size: 24rpx;
						}

						&::after {
							content: '起';
							font-size: 24rpx;
							color: #76706B;
						}
					}

					.m-hotel-title {
						font-size: 30rpx;
						color: #33302D;
						font-weight: 600;
						line-height: 40rpx;
					}

					.m-hotel-score {
						font-size: 36rpx;
						color: #D3A358;
					}

					.m-hotel-comment {
						font-size: 24rpx;
						color: #33302D;
						margin-left: 15rpx;
					}
				}
			}
		}
	}

	.m-item_font1 {
		width: 100rpx;
		text-align: center;
		font-size: 20rpx;
		color: #fa3534;
	}

	.m-score-font1 {
		font-size: 40rpx;
		color: #fa3534;
	}

	.m-score-font2 {
		font-size: 22rpx;
		color: #ADA9A5;
	}

	.m-score-font3 {
		font-size: 26rpx;
		color: #333;
	}

	.m-score-line {
		width: 1px;
		height: 50rpx;
		background: #ccc;
	}

	.m-comment-more {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 240rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 2rpx solid #D3CEC9;
		font-size: 24rpx;
		color: #222222;
	}

	.m-score-item {

		.m-score-item-img {
			width: 72rpx;
			height: 72rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.m-score-item-star {
			font-size: 48rpx;
			color: #D3A358;
			font-weight: 500;

			&::after {
				content: '分';
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.m-score-item-font1 {
			font-size: 26rpx;
			color: #222222;
			font-weight: 600;
			line-height: 38rpx;
			margin-bottom: 4rpx;
		}

		.m-score-item-con {
			.m-pingjia-img {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}

				image {
					width: 100%;
					border-radius: 8rpx;
				}
			}
		}
	}

	.m-icon {
		display: flex;
		width: 50rpx;
		height: 36rpx;
		align-items: center;

		image {
			width: 24rpx;
			height: 24rpx;
		}
	}


	.m-house {
		width: 750rpx;
		height: 1100rpx;
	}

	.m-house-title {
		display: flex;
		align-items: center;
		padding-left: 25rpx;
		width: 750rpx;
		height: 100rpx;
		font-size: 28rpx;
		font-weight: 800;
	}

	.m-house-scroll {
		display: flex;
		flex-direction: column;

		.m-config {
			display: flex;
			flex-wrap: wrap;
			margin: 25rpx 25rpx 0 25rpx;

			.m-config-item {
				display: flex;
				align-items: center;
				width: 33.33%;
				font-size: 26rpx;
				color: #333;
				margin-top: 15rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.m-config-text {
			display: flex;
			padding: 0 25rpx;
			margin-top: 15rpx;

			.m-config-text-left {
				flex-shrink: 0;
				flex-grow: 0;
				width: 150rpx;
				font-size: 26rpx;
				color: #999;
			}

			.m-config-text-right {
				font-size: 26rpx;
				color: #333;
			}
		}

		.m-poup-title {
			font-size: 28rpx;
			color: #333;
			margin: 25rpx 25rpx 0 25rpx;
			font-weight: 800;
		}
	}

	.m-poup-bottom {
		display: flex;
		align-items: center;
		height: 100rpx;
		justify-content: space-between;
		padding: 0 25rpx;

		.m-poup-btn {
			width: 200rpx;
			height: 80rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 28rpx;
			background: #fa3534;
		}
	}

	.m-chat {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 150rpx;
		left: 30rpx;
		width: 90rpx;
		height: 90rpx;
		background: #fa3534;
		border-radius: 50%;
		box-shadow: 10rpx 10rpx 20rpx rgba($color: #000000, $alpha: 0.15);
		z-index: 10;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>